<template>
  <!-- 信用卡分案历史查询-->
  <div class="divisional">
    <div class="search_box" style="width: 93.5%;">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in list_1" :key="index">
          <span class="inpText">{{item.name}}</span>
          <el-input v-model="item.input_val" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
        </el-col>
        <el-col :span="6" >
          <span class="inpText">逾期等级</span>
          <el-select v-model="overdueLevelF" size="small" placeholder="请选择" style="width: 27%;">
            <el-option v-for="item in overdueLevelOptions" :key="item.index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span>- -</span>
          <el-select v-model="overdue_levelS" size="small" placeholder="请选择" style="width: 27%;">
            <el-option v-for="item in overdueLevelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" >
          <span class="inpText">催收方式</span>
          <el-select v-model="collectionType" size="small" placeholder="请选择" style="width: 60%;">
            <el-option v-for="item in outboundOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
          </el-select>
        </el-col>

        <el-col :span="6" style="text-align: right;padding-right: 62px;">
           <el-button size="small" type="primary" @click="search">查询</el-button>
           <el-button size="small" type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table ref="pageTable"
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="tableData"
          :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="400" style="width: 100%" >
          <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
          <el-table-column prop="accountOpeningInstitution" label="开户机构" width></el-table-column>
          <el-table-column prop="cardNumber" label="信用卡号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="contractNumber" label="贷款合同号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="IdentificationNumber" label="证件号码" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
          <el-table-column prop="collectionType" label="催收方式" :formatter="OutboundToChinese"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog :visible.sync="isInfodetail" width="75%">
      <span slot="title">信息详情</span>
      <div class="mainInfoBox">
        <div class="infoBox" v-for="(item,index) in infoList" :key="index">
          <label for>{{item.text}}:</label>
          <el-input v-model="item.value" size="small" disabled placeholder="请输入内容"></el-input>
        </div>

        <el-divider content-position="left">分案催收记录</el-divider>

        <el-row style="width: 100%;">
          <el-col >
            <el-table :data="infoRecords" :header-cell-style="{background:'LightYellow	',color:'black'}"
              style="width: 100%" >
              <el-table-column prop="serialNumber" label="案件流水号"></el-table-column>
              <el-table-column prop="isFirstIssue" label="是否首逾" :formatter="IsFirst"></el-table-column>
              <el-table-column prop="overdueArrears" label="逾期欠款"></el-table-column>
              <el-table-column prop="overdueLevel" label="逾期等级"></el-table-column>
              <el-table-column prop="overdueDay" label="逾期天数"></el-table-column>
              <el-table-column prop="score" label="评分"></el-table-column>
              <el-table-column prop="collectionType" label="催收方式" :formatter="OutboundToChinese"></el-table-column>
              <el-table-column prop="dataTime" label="下发时间"></el-table-column>
              <!--<el-table-column prop="isDelete" label="是否合并" :formatter="isMerge"></el-table-column>-->
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import {cmcUrl} from '../../../../static/baseUrl';
  import {Message} from "element-ui";
const ExportJsonExcel = require('js-export-excel')
  export default {
    data() {
      return {
        excelTitle:['身份证号','贷款合同号','所属银行','客户号'],//导出excel的表头，与excelColumn，需一一对应
        excelColumn:['peopleId','contractNum','bank','customerId'],//导出excel每列对应的数据，
        reSmsTemplate: "",
        showSmsTemplate: false,
        smsTemplateOptions: [{
          label: 'o1',
          value: 'o1',
        }, {
          label: 'o2',
          value: 'o2',
        }, {
          label: 'o3',
          value: 'o3',
        }, ],
        reoutbound: "3",
        divisionID: "",
        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        list_1: [{
            name: "开户机构",
            input_val: "",
          },
          {
            name: "证件号码",
            input_val: "",
          },
          {
            name: "贷款合同号",
            input_val: "",
          },
          {
            name: "信用卡号",
            input_val: "",
          },
          {
            name: "手机号",
            input_val: "",
          },
        ],
        options: [{
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        tableData: [{
          accountOpeningInstitution: "南开支行",
          cardNumber: "NO.001213",
          contractNumber: "DK03402020",
          name: "张三",
          IdentificationNumber: "022010198503052209",
          phoneNumber: "13309853876",
          collectionType: "1"
        },{
          accountOpeningInstitution: "河西支行",
          cardNumber: "NO.903001218",
          contractNumber: "DK45297042",
          name: "乾隆",
          IdentificationNumber: "022010138503052209",
          phoneNumber: "13309853876",
          collectionType: "2"
        },{
          accountOpeningInstitution: "和平支行",
          cardNumber: "NO.00235882",
          contractNumber: "DK32407423568394",
          name: "康熙",
          IdentificationNumber: "022010120903052209",
          phoneNumber: "13342855908",
          collectionType: "3"
        },{
          accountOpeningInstitution: "河北支行",
          cardNumber: "NO.006623581209",
          contractNumber: "DK32问23742974",
          name: "李世民",
          IdentificationNumber: "022010120903052209",
          phoneNumber: "13342855908",
          collectionType: "4"
        }],
        //   逾期选择
        isFirstIssue: "",
        yuqiOptions: this.GLOBAL.firstOptions,
        //   催收
        cuishouNum: "",
        //   催收方式
        collectionType: "",
        outboundOptions: [
          {
            label: "短信",
            value: "1",
          },
          {
            label: "智能外呼",
            value: "2",
          },
          {
            label: "人工客服",
            value: "3",
          },
          {
            label: "委外数据",
            value: "4",
          },
        ],

        //   逾期等级
        overdueLevelF: "",
        overdue_levelS: "",
        overdueLevelOptions: this.GLOBAL.overdueLevelOptions,
        //   详情
        detailInfo: [],

        //分案方式
        divisionOptions: this.GLOBAL.divisionOptions,
        //催收优先级
        priorityOptions: this.GLOBAL.priorityOptions,
        //详情页面不显示字段
        hiddenF: [{
          value: "reservedFields2",
          text: "",
        }, {
          value: "reservedFields3",
          text: "",
        }],
        //详情页面要显示字段
        infoList: [/* {
          field: "serialNumber",
          text: "案件流水号",
          value:"",
        }, */{
          field: "name",
          text: "姓名",
          value:"",
        },{
          field: "IdentificationNumber",
          text: "证件号码",
          value:"",
        },{
          field: "accountOpeningInstitution",
          text: "开户机构",
          value:"",
        },{
          field: "contractNumber",
          text: "贷款合同号",
          value:"",
        },{
          field: "phoneNumber",
          text: "手机号",
          value:"",
        },{
          field: "cardNumber",
          text: "信用卡号",
          value:"",
        }],
        infoRecords:[],
        //分案状态
        stateOp: this.GLOBAL.stateOptions,
        //加载中
        loading: false,
      };
    },
    created() {
      this.checkInfo();
    },
    methods: {
      search(){
        this.loading = true;
        this.currentPage = 1;
        this.checkInfo();
      },
      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      /**数组合并去重
       * @param {Object} arr1
       * @param {Object} arr2
       */
      uniqueArr(arr1, arr2) {
        let temp = [];
        arr2.map((item, index) => {
          if (item != null && item != "") {
            let id1 = item.id;
            let ff = false;
            arr1.map((val, ii) => {
              if (val != null && val != "") {
                let id2 = val.id;
                if (id1 == id2) {
                  ff = true;
                }
              }
            });
            if (!ff) {
              temp.push(item);
            }
          }
        });
        //合并两个数组
        arr1.push(...temp); //或者arr1 = [...arr1,...arr2]
        let arr3 = Array.from(new Set(arr1)) //let arr3 = [...new Set(arr1)]
        return arr3;
      },
      /**数组按指定key排序
       * @param {Object} arr
       * @param {Object} key
       */
      sortByKey(arr, key) {
        return arr.sort(function(a, b) {
          let x = a[key];
          let y = b[key];
          return ((x < y) ? -1 : ((x > y) ? 1 : 0))
        });
      },
      IsNewLoan(row) {
        let vv = row.newAndOldLoansn;
        let ttt = this.isNewOptions.find((element) => (element.value == vv));
        return ttt ? ttt.text : "";
      },
      IsFirst(row) {
        let vv = row.isFirstIssue;
        let ttt = this.yuqiOptions.find((element) => (element.value == vv));
        return ttt ? ttt.label : "";
      },
      OutboundToChinese(row) {
        let vv = row.collectionType;
        let ttt = this.outboundOptions.find((element) => (element.value == vv));
        return ttt ? ttt.label : "";
      },
      isMerge(row) {
        console.log("row==",row);
        let str = row.isDelete;
        if(str!=null && str!=""){
          console.log("str==",str);
          if(str=='1'){
            return "是";
          }else{
            return "否";
          }
        } else {
          return "否";
        }
      },
      IsDivisionOptions(data) {
        let vv = data.division;
        let ttt = this.divisionOptions.find((element) => (element.value == vv));
        return ttt ? ttt.text : "";
      },
      isPriorityOptions(data) {
        let vv = data.collectionPriority;
        let ttt = this.priorityOptions.find((element) => (element.value == vv));
        return ttt ? ttt.text : "";
      },
      transToState(data) {
        let vv = data.state;
        let ttt = this.stateOp.find((element) => (element.value == vv));
        return ttt ? ttt.text : "";
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },
      handleInfoDetail(val) {
        switch (val) {
          case "phoneNumber":
            return "手机号";
          case "serialNumber":
            return "案件流水号";
          case "accountOpeningInstitution":
            return "开户机构";
          case "cardNumber":
            return "信用卡号";
          case "contractNumber":
            return "贷款合同号";
          case "IdentificationNumber":
            return "身份证号";
          case "isFirstIssue":
            return "是否首逾";
          case "collectionTimes":
            return "催收次数";
          case "riskLevel":
            return "风险等级";
          case "conllectionType":
            return "催收方式";
          case "name":
            return "姓名";
          case "overdueArrears":
            return "逾期欠款";
          case "overdueDay":
            return "逾期天数";
          case "overdueLevel":
            return "逾期等级";
          case "productName":
            return "产品名称";
          case "state":
            return "状态";
          case "productCode":
            return "产品编码";
          case "assetSideCode":
            return "资产方编码";
          default:
            return val;
        }
      },
      codeToChinese(data) {
        console.log("codeToChinese---start", data);
        console.log("codeToChinese---start,data.collectionPriority,", data.collectionPriority);
        let tempb = this.IsFirst(data);
        this.$set(data, "isFirstIssue", tempb);

        let tempc = this.OutboundToChinese(data);
        this.$set(data, "outbound", tempc);

        let tempd = this.IsNewLoan(data);
        this.$set(data, "newAndOldLoansn", tempd);

        let tempe = this.IsDivisionOptions(data);
        this.$set(data, "division", tempe);

        let tempf = this.isPriorityOptions(data);
        this.$set(data, "collectionPriority", tempf);

        let tempg = this.transToState(data);
        this.$set(data, "state", tempg);
        console.log("codeToChinese---end", data);
      },
      //过滤不显示字段
      filterHiddenF(data) {
        console.log("data   ", data);
        Object.keys(this.hiddenF).forEach((item) => {
          let ss = this.hiddenF[item];
          console.log("ss   ", ss);
          this.$delete(data, ss.value);
        });
        return data;
      },
      handleClick(data) {
        //console.log(data, "sss");
        let options = {
          peopleId: data["peopleId"],
          contractNum: data["contractNum"]
        }

        this.$axios({
            method: "post",
            url: `/CMC/division/getDivisionListDetails`,
            data: options,
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.infoRecords = res.data.dataList;
              //this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {console.log(err)});

        Object.keys(this.infoList).forEach((item) => {
          let fiedMap = this.infoList[item];
          let key = fiedMap.field;
          this.$set(fiedMap,"value",data[key]);
        })
        //console.log(this.detailInfo, "this.detailInfo");
        this.isInfodetail = true;
      },
      reset() {
        this.list_1[0].input_val = "";
        this.list_1[1].input_val = "";
        this.list_1[2].input_val = "";
        this.list_1[3].input_val = "";
        this.list_1[4].input_val = "";
        this.isFirstIssue = "";
        this.outbound = "";

        this.overdueLevelF = "";
        this.overdue_levelS = "";
      },
      checkInfo() {
        //   所属银行
        let bank = this.list_1[0].input_val;
        // 身份证
        let peopleId = this.list_1[1].input_val;
        // 贷款合同号
        let contractNum = this.list_1[2].input_val;
        // 客户号
        let customerId = this.list_1[3].input_val;
        // s手机号
        let phone = this.list_1[4].input_val;
        // 是否逾期
        let isFirstIssue = this.isFirstIssue;
        //   催收方式
        let collectionType = this.collectionType;
        //   逾期等级
        let overdueLevelF = this.overdueLevelF;
        let overdueLevelS = this.overdue_levelS;

        let options = {
          accountOpeningInstitution: bank,
          IdentificationNumber: peopleId,
          contractNumber: contractNum,
          phoneNumber: phone,
          isFirstIssue: isFirstIssue,
          collectionType: collectionType,
          overdueLevelF: overdueLevelF,
          overdueLevelS: overdueLevelS,
          page: this.currentPage,
          pageSize: this.pageSize,
        };

        this.$axios({
            method: "post",
            url: `/CMC/division/getDivisionListBasics`,
            data: options,
          })
          .then((res) => {
            console.log(res, "查询数据");
            this.loading = false;
            if (res.code == 200) {
              //this.tableData = res.data.list;
              //this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      exportConfirm(){
         let msg="是否导出当前检索结果数据?";
         //let removeid = data.id;
         this.$confirm(msg,"提示",{
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'success'
           }).then(()=>{
             this.exportExcel();
             console.log("导出数据成功！");
           }).catch((err) => {console.log("err",err)});
      },
      exportExcel(){
        let option={};
        option.fileName = 'textexport'
        option.datas=[
          {
            sheetData: this.tableData,
            sheetName: '分案数据',
            sheetFilter: this.excelColumn,
            sheetHeader: this.excelTitle,
            columnWidths: [10,10,20,10]//对应的列宽，置为屏宽的百分比，40%
          },
        ];

        var toExcel=new ExportJsonExcel(option);
        toExcel.saveExcel();
      }
    },


  };
</script>
<style lang="scss" scoped>
  .divisional {
   /deep/ .el-row:nth-child(1) {
       width: 100%;
       height: 66px;
       // background: pink;
       padding: 0;
       margin: 0;

       .el-col {
         padding: 0;
         height: inherit;
         /* border: 1px solid slategrey; */
         box-sizing: border-box;
         overflow: hidden;

         div:nth-child(1) {
           width: 100%;
           height: inherit;
           //   background: yellowgreen;
           display: flex;
           flex-wrap: wrap;
           // justify-content: flex-start;
           justify-content: space-around;
           box-sizing: border-box;
           /* padding-left: 30px;
           padding-top: 40px; */
           overflow-y: auto;

           .v_box {
             width: 20%;
             height: 8vh;
             margin-left: 15px;
             margin-right: 40px;
             // margin-bottom: 10px;
             // background: chocolate;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             padding: 0;
             border: none;

             div {
               padding: 0;
             }

             &:nth-child(7) {

               .el-date-editor--daterange.el-input,
               .el-date-editor--daterange.el-input__inner,
               .el-date-editor--timerange.el-input,
               .el-date-editor--timerange.el-input__inner {
                 width: 100%;
               }
             }

             &:last-child {
               display: flex;
               flex-direction: row;
               justify-content: center;
               align-items: center;

               .el-button {
                 width: 70px;
                 height: 30px;

                 &:first-child {
                   margin-right: 10px;
                 }
               }
             }
           }
         }
       }
     }

     /deep/ .el-row:nth-child(2) {
       width: 100%;
      /* height: 60vh; */
       // background: pink;
       padding: 0;
       margin: 0;
       margin-top: 10px;

       table {
         tbody {
           tr {
             td {
               .cell {
                 box-sizing: border-box;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 word-break: normal !important;
                 line-height: inherit;
                 //   padding-right: 10px;
               }
             }
           }
         }
       }
     }

     .pageBox {
       display: flex;
       width: 100%;
       justify-content: left;
       margin-top: 10px;
     }


     /deep/ .el-dialog {
       .mainInfoBox {
         width: 100%;
         max-height: 60vh;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         flex-wrap: wrap;
         overflow-y: auto;

         .infoBox {
           display: flex;
           flex-direction: row;
           justify-content: center;
           align-items: center;
           height: 40px;
           width: 30%;

           label {
             width: 100px;
           }

           .el-input {
             flex: 1 1 auto;
           }
         }
       }
     }
   }


   .search_box {
     background: #fff;
     border-radius: 10px;
     padding: 40px 40px 80px 40px;
     margin: 0 0 20px 0;
   }

   .box_center {
     text-align: left;
   }

   .searchBtn {
     margin-left: 80px;
   }

   .search_box .inpText{
     width: 75px;
     justify-content: space-between;
     text-align: right;
     display: inline-block;
   }
</style>
